<template>
	<view>
		<video id="myVideo" :src="videoUrl" binderror="videoErrorCallback" 
		:controls="unlocked" :enable-play-gesture="unlocked"/>
		<view class="tabs">
		    <scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" >
		        <view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="ontabchange">
		            <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
		        </view>
		    </scroll-view>
		    <view class="line-h"></view>
		    <swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
		        <swiper-item class="swiper-item" :key="1">
					<view v-if="!unlocked" class="videoDetail-head">
						<form bindsubmit="unlock">
							<view>说明：课程未解锁,只能试看第一节。</view>
							<text>￥{{courseInfo.price}}</text>
							<input name="unlock" bindinput="onInput" placeholder="请输入解锁码"/>
							<button form-type="submit">{{buttinText}}</button>
						</form>
					</view>
					<view class="videoDetail-desc">
						<text>{{videoDetail.desc}}</text>
					</view>
					<view class="videoDetail-content">
						<text>{{courseInfo.author}}{{courseInfo.subject}}</text>
								<br/><view>{{videoDetail.content}}</view>
					</view>


		        </swiper-item>
				<swiper-item class="swiper-item" :key="2">
					<view class="episode">
					<block v-for="(item,index) in videoList" :key="item.No">
					    <button @tap="onEpisodeSwitch(index)" 
							:class="episodeIndex==index ? 'uni-tab-item-title-active' : ''">
							{{item.No}}.{{item.title}}
						</button>
					</block>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" :key="3">
					<view class="videoDetail-desc">
						<text>{{courseInfo.name}}-</text>
					</view>
					<view class="videoDetail-content">
						<text>{{courseInfo.author}}{{courseInfo.subject}}</text>
								<br/><view>{{videoDetail.desc}}</view>
					</view>
				</swiper-item>
		    </swiper>
		</view>


	</view>
</template>

<script>
	const app = getApp()
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				videoDetail:{},
				courseInfo:{name:""},
				unlocked:false,
				videoList:[],
				buttinText:'解锁',
				tabBars:[
					{id:1,name:"本节详情"},{id:2,name:"列表选集"},{id:3,name:"课程介绍"}
				],
				tabIndex:0,
				episodeIndex:0
			}
		},
		computed:{
			videoUrl(){
				return app.globalData.videoUrlHead+this.videoDetail.videoUrl
			}
		},
		onLoad(e) {
			console.log(e)
			db.collection('albums').doc(e.cid).get({
				success:res=>{
					console.log(res)
					this.courseInfo = res.data
				},
			})
			db.collection('videos').where({
				albums_id: e.cid
			}).get({
				success:res=>{
					console.log(res)
					this.videoList = res.data
					this.videoDetail = res.data[0]
					this.episodeIndex = 0
				},
			})
			if(app.globalData.ownedCourses.length==0||
					!(app.globalData.ownedCourses.indexOf(e.cid)>-1)){
				db.collection('student_info').where({
					_openid: app.globalData.openid
				}).field({ownedCourses:true}).get({
					success:res=>{
						console.log(res)
						if(res.data.length==0){
							uni.showModal({
								title:'您还未完善您的基本信息',
								content:'完善信息后才能学习课程！点击确定前去完善',
								success: (e) => {
									console.log(e)
									if(e.confirm==true){
										uni.navigateTo({url:'../me/userinfo'})
									}
								}
							})
							return
						}
						app.globalData.ownedCourses = res.data[0].ownedCourses
						if(app.globalData.ownedCourses.indexOf(e.cid)>-1){
							this.unlocked = true
						}
					},
				})
			}else if(app.globalData.ownedCourses.indexOf(e.cid)>-1){
				this.unlocked = true
			}
		},
		methods: {
			onEpisodeSwitch(i){
				if(this.episodeIndex == i) return 
				if(!this.unlocked){
					uni.showToast({
						title:'请先解锁课程'
					})
					return 
				}
				this.videoDetail = this.videoList[i]
				this.episodeIndex = i
			},
			ontabchange(e) {
				
			    let index = e.type=="tap"?
					e.target.dataset.current||e.currentTarget.dataset.current:
					e.target.current||e.detail.current;
					
				if (this.tabIndex === index) {
					return;
				}
			
				this.tabIndex = index;
				this.scrollInto = this.tabBars[index].id;
			
			},

		}
	}
</script>

<style>
video{
	width: 100%;

}
.tabs {
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        background-color: #ffffff;
        /* #ifdef MP-ALIPAY || MP-BAIDU */
        height: 100vh;
        /* #endif */
    }

    .scroll-h {
        width: 750rpx;
		/* #ifdef H5 */
		width:100%;
		/* #endif */
		height: 80rpx;
        flex-direction: row;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
        /* flex-wrap: nowrap; */
        /* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
    }

    .line-h {
        height: 1rpx;
        background-color: #cccccc;
    }

    .uni-tab-item {
        /* #ifndef APP-PLUS */
        display: inline-block;
        /* #endif */
        flex-wrap: nowrap;
        padding-left: 34rpx;
        padding-right: 34rpx;
    }

    .uni-tab-item-title {
        color: #555;
        font-size: 30rpx;
        height: 80rpx;
        line-height: 80rpx;
        flex-wrap: nowrap;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
    }

    .uni-tab-item-title-active {
        color: #007AFF;
    }
	
	.swiper-box {
	    flex: 1;
		height: 500rpx;
	}
	
	.swiper-item {
	    flex: 1;
	    flex-direction: row;
	}
	
.videoDetail-head {
  position: relative;
  margin: 0 40rpx;
}
.videoDetail-head text{
  color: red;
  font-size: 50rpx;
  width: 120rpx;
  display: inline-block;

}
.videoDetail-head input{
  display: inline-block;
  border:1rpx solid gray;
  margin: 0 10rpx;
}
.videoDetail-head button{
  display: inline-block;
  line-height: 2;
  position: absolute;
  right: 0;
  background-color: red;
  color: white;

}
.videoDetail-desc{
  text-align: left;
  font-weight: bold;
  margin: 30rpx;
  font-size: 50rpx;
}
.videoDetail-content{
  margin: 50rpx;
  /*position: absolute;*/

}
.episode button{
  display: inline-block;
  width: 50%
}

</style>
